<template>
  <div class="index-list column">
    <el-card class="competition-list">
      <div slot="header" class="card-header">
        <span class="font20">学科竞赛</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >更多</el-button
        >
      </div>
      <div class="itemlist">
        <ul class="list">
          <li
            @click="
              $router.push({
                name: 'compDetail',
                params: { item: item },
              })
            "
            v-for="(item, index) in compList"
            :key="index"
          >
            <span>{{ item.compName }}</span>
          </li>
        </ul>
      </div>
    </el-card>
    <div class="other-list row between">
      <el-card class="other-card">
        <div slot="header" class="card-header">
          <span class="font20">通知通告</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >更多</el-button
          >
        </div>
        <div class="itemlist">
          <ul class="list">
            <li
              @click="
                $router.push({
                  name: 'articalDetail',
                  params: { content: item.content, category: item.category },
                })
              "
              v-for="(item, index) in noticesList"
              :key="index"
            >
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </el-card>
      <el-card class="other-card">
        <div slot="header" class="card-header">
          <span class="font20">文件下载</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >更多</el-button
          >
        </div>
        <div class="itemlist">
          <ul class="list">
            <li
              @click="
                $router.push({
                  name: 'articalDetail',
                  params: { content: item.content, category: item.category },
                })
              "
              v-for="(item, index) in downloadsList"
              :key="index"
            >
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexList",
  props: {
    compList: {
      type: Array,
      default() {
        return [];
      },
    },
    noticesList: {
      type: Array,
      default() {
        return [];
      },
    },
    downloadsList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style scoped>
.index-list {
  margin-top: 14px;
}
.itemlist {
}
.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.competition-list li {
  width: 45%;
}
.other-list {
  margin-top: 14px;
}
.other-card {
  width: 49%;
}
ul {
  padding-left: 0px;
}
ul li {
  font-size: 16px;
  line-height: 28px;
  background: url(http://scsbk.ycfuture.cn/templates/system/green/img/icon001.png)
    no-repeat left center;
  padding: 5px 20px 5px 25px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  color: #404040;
}
</style>